<template>
  <div class="addForm">
    <el-dialog
      title="新建预排订单"
      :visible.sync="dialogVisible"
      width="65%"
      :before-close="handleClose"
    >
      <el-row :gutter="20">
        <el-col v-for="(item, index) in tabs" :key="index" :span="8">
          <div
            class="tabs"
            :class="current == index ? 'current' : 'no-current'"
            @click="select(index)"
          >
            {{ item }}
          </div>
        </el-col>
      </el-row>
      <el-form
        v-if="current == 0"
        class="form"
        :model="form"
        label-width="110px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="预排订单号">
              <el-input
                v-model="form.orderNum"
                disabled
                placeholder="系统自动生成"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称">
              <el-input v-model="form.name" placeholder="请填写" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品类别">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品名称">
              <el-input v-model="form.product" placeholder="请填写" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户需求量(件)">
              <el-input
                v-model="form.quantity"
                placeholder="请填写"
              /> </el-form-item></el-col>
          <el-col :span="12">
            <el-form-item label="订单交期">
              <el-date-picker
                v-model="form.time"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务部门">
              <el-select v-model="form.department" placeholder="请选择">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="12"
          ><el-form-item label="业务员">
            <el-select v-model="form.clerk" placeholder="请选择">
              <el-option label="" value="" />
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否整单外协">
              <el-select v-model="form.outside" placeholder="请选择">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="外协工厂">
              <el-select v-model="form.outsourcedFactory" placeholder="请选择">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form
        v-if="current == 1"
        class="form"
        :model="form"
        label-width="220px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="海关报关检验时间(工作日)">
              <el-input-number
                v-model="form.time"
                :min="0"
                controls-position="right"
                :precision="0"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客指第三方检验装柜时间(工作日)">
              <el-input-number
                v-model="form.time"
                :min="0"
                controls-position="right"
                :precision="0"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="储运工厂装柜运送时间(工作日)">
              <el-input-number
                v-model="form.time"
                :min="0"
                controls-position="right"
                :precision="0"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="储运运送时间(工作日)">
              <el-input-number
                v-model="form.time"
                :min="0"
                controls-position="right"
                :precision="0"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="面料到场时间(工作日)">
              <el-input-number
                v-model="form.time"
                :min="0"
                controls-position="right"
                :precision="0"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他时间(工作日)">
              <el-input-number
                v-model="form.time"
                :min="0"
                controls-position="right"
                :precision="0"
                placeholder=""
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form
        v-if="current == 2"
        class="form"
        :model="form"
        label-width="110px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户需求量(件)">
              <el-input v-model="form.num" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单交期">
              <el-input v-model="form.num" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="已排产量">
              <el-input v-model="form.num" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="待排产量">
              <el-input v-model="form.num" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button type="primary" @click="addBatch">增加批次</el-button>
      <el-table v-if="current == 2" :data="data">
        <el-table-column label="批次序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="批次需求量" width="180">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.num"
              :min="0"
              controls-position="right"
              :precision="0"
              placeholder=""
            />
          </template>
        </el-table-column>
        <el-table-column
          label="批次排产量"
          prop="batchOutput"
        />
        <el-table-column
          label="外协量"
          prop="externalCorrelates"
        />
        <el-table-column label="批次船期/交期" min-width="220">
          <template slot-scope="scope">
            <el-row type="flex" :gutter="10">
              <el-col :span="8">
                <el-select v-model="data.sailing" placeholder="">
                  <el-option label="" value="" />
                </el-select>
              </el-col>
              <el-col :span="16">
                <el-date-picker
                  v-model="data.time"
                  placeholder=""
                />
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="批次最早上线时间" min-width="150">
          <el-date-picker
            v-model="data.onlineTime"
            placeholder=""
          />
        </el-table-column>
        <el-table-column label="操作" min-width="120">
          <template slot-scope="scope">
            <el-button
              type="text"
              class="danger"
              @click="deleteBatch(scope)"
            >删除批次</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      tabs: ['基本信息', '除生产其他时间确认', '批次信息'],
      current: 0,
      form: {},
      data: [
        {
          inde: 1,
          num: 999
        }
      ]
    }
  },
  watch: {
    value(val) {
      if (val && val !== this.dialogVisible) {
        this.dialogVisible = val
        if (val) {
          //   this.selectRows = {}
          //   this.$refs?.table?.$refs?.myTable.setCurrentRow()
        }
      }
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  created() {},
  mounted() {},
  methods: {
    select(val) {
      this.current = val
    },
    handleClose() {
      this.dialogVisible = false
    },
    addBatch() {
      this.data.push({ index: 0 })
    },
    deleteBatch(scope) {
      this.data.splice(scope.$index, 1)
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/element-variables.scss";
.current {
  color: #fff;
  background: $--color-primary;
}
.no-current {
  background: #f0f2f5;
}
.tabs {
  text-align: center;
  padding: 2px 0px;
  border-radius: 4px;
  cursor: pointer;
}
.form {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;

  .el-select {
    width: 100%;
  }
  .el-date-editor {
    width: 100%;
  }
}
.danger {
  color: $--color-danger;
}
.el-date-editor {
  width: 100% !important;
}
</style>
